---
import Layout from '../layouts/Layout.astro';
import { getEntry, type CollectionEntry } from 'astro:content';
import styles from '../pages-styles/react-table.module.scss';
import Customers from '../components/framework-landing-pages/react/sections/customers/Customers';
import { LandingPageFAQ } from '@ag-website-shared/components/landing-pages/LandingPageFAQ';
import FeaturesSection from '../components/framework-landing-pages/react/sections/features/FeaturesSection';
import Showcase from '../components/framework-landing-pages/react/sections/showcase/Showcase';
import { LandingPageSection } from '@ag-website-shared/components/landing-pages/LandingPageSection';
import GithubSlugger from 'github-slugger';

import InstallText from '@components/framework-landing-pages/InstallTextReact';
import { Icon } from '@ag-website-shared/components/icon/Icon';
import { Finance } from 'src/components/demos/examples/finance';
import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';

const slugger = new GithubSlugger();
const { data: faqData } = (await getEntry('faqs', 'react-landing-page')) as CollectionEntry<'faqs'>;
const { data: versionsData } = (await getEntry('versions', 'ag-grid-versions')) as CollectionEntry<'versions'>;
const { data: examples } = (await getEntry('reactLandingPage', 'examples')) as CollectionEntry<'reactLandingPage'>;
const latestVersionWithHighlightData = versionsData.find((version) => version.landingPageHighlight);
---

<Layout
    title={'AG Grid: A Fast, Powerful, and Flexible React Data Table'}
    description={"Explore AG Grid's fast, powerful, and customisable React Table library. Add high-performance React Data Tables to your React applications in minutes, for free."}
    showDocsNav={false}
    showSearchBar={true}
>
    <div class={styles.heroSection}>
        <div class={styles.blueRectangle}></div>
        <div class={styles.heroSectionInner}>
            <div class={styles.heroSectionContainer}>
                <div class={styles.heroSectionHeadingContainer}>
                    <a
                        href={urlWithBaseUrl('./whats-new')}
                        class:list={[
                            styles.heroSectionVersionTagContainer,
                            'plausible-event-name=react-table-whats-new',
                        ]}
                    >
                        <span class={styles.heroSectionVersion}>AG Grid v{latestVersionWithHighlightData?.version}</span
                        >
                        <span class={styles.heroSectionFeatureHighlight}>
                            {
                                latestVersionWithHighlightData?.landingPageHighlight && (
                                    <span>{latestVersionWithHighlightData?.landingPageHighlight}</span>
                                )
                            }
                            <Icon svgClasses={styles.heroSectionFeatureArrow} name="arrowRight" />
                        </span>
                    </a>
                    <h1 class={styles.heroSectionTag}>React Table</h1>
                    <h2 class={styles.heroSectionHeading}>Fast, Powerful and Flexible React Tables</h2>
                    <h3 class={styles.heroSectionSubHeading}>
                        Add <b>high-performance</b>, <b>feature rich</b>, and <b>fully customisable</b> React Data Tables
                        to your application in <b>minutes</b>, all for <b>free</b>.
                    </h3>
                </div>
                <div class={styles.heroSectionButtonContainer}>
                    <a
                        id="'get-started-react"
                        class:list={[
                            'button-secondary',
                            styles.heroSectionCta1,
                            'plausible-event-name=react-table-get-started',
                        ]}
                        href={urlWithBaseUrl('./react-data-grid/getting-started/')}>Get Started</a
                    >
                    <div class={styles.heroSectionCta2}>
                        <InstallText client:load />
                    </div>
                </div>
                <div class={styles.heroSectionDemoContainer}>
                    <Finance client:only="react" gridHeight={600} />
                </div>
                <a
                    class:list={[
                        'button',
                        styles.heroSectionViewAllDemosLink,
                        'plausible-event-name=react-table-view-demos',
                    ]}
                    href={urlWithBaseUrl('./example')}
                    >View All Demos
                    <Icon svgClasses={styles.heroSectionDemosArrow} name="arrowRight" /></a
                >
            </div>
        </div>
    </div>

    <LandingPageSection
        tag="Why Use AG Grid to Build React Tables?"
        heading="Amazingly Fast and Fully Customisable with an Unbeatable Feature Set"
        subHeading="Get started in minutes and access 1000s of features without compromising on performance. Customise your React Table with your own styles and components or upgrade to enterprise to use our advanced features."
    >
        <FeaturesSection client:load />
    </LandingPageSection>

    <LandingPageSection
        tag="Where Can I See AG Grid React Tables Being Used?"
        heading="Used in Every Industry, for All Types of Data"
        subHeading="Trusted by 90% of Fortune 500 industries from Finance and AI, to DevTools and Aeronautics. Most of these uses are private, but we've hand-picked a few open-source examples:"
    >
        <Showcase client:load />
    </LandingPageSection>

    <LandingPageSection
        tag="Who Builds React Tables with AG Grid?"
        headingHtml={'Loved By Developers<br />Trusted By The Worlds Largest Enterprises'}
        subHeadingHtml={`<span>Over <b>90% of the Fortune 500</b> build React Tables using AG Grid, with <a href="https://www.npmjs.com/package/ag-grid-community" target="_blank"> 1,000,000+</a> npm downloads per week and over <a href="https://github.com/ag-grid/ag-grid/tree/latest" target="_blank"> 12,000</a> Stars on GitHub.</span>`}
    >
        <Customers client:load />
    </LandingPageSection>

    <LandingPageSection
        tag="How Do I Build a React Table with AG Grid?"
        heading="Get Started with React Table Examples"
        subHeading=" We have a range of examples, tutorials and documentation to help you start building your first React Table with AG Grid."
        sectionClass={styles.examplesSection}
        showBackgroundGradient
    >
        <div class={styles.examplesSectionContainer}>
            {
                examples.map((card) => (
                    <div class={styles.examplesSectionCard}>
                        <img
                            class={styles.examplesSectionCardImage}
                            src={urlWithBaseUrl(`landing-pages/examples/${card.img}`)}
                            alt={card.imgAlt}
                        />

                        <div class={styles.examplesSectionCardDetails}>
                            <h3>{card.title}</h3>
                            <p>{card.content}</p>
                        </div>

                        <div class={styles.examplesSectionCardCta}>
                            <a
                                id={`examples-live-demo-cta-${slugger.slug(card.title)}`}
                                href={urlWithBaseUrl(card.demo)}
                                target="_blank"
                            >
                                Live Demo
                            </a>
                            <a
                                id={`examples-docs-cta-${slugger.slug(card.title)}`}
                                href={urlWithBaseUrl(card.docs)}
                                target="_blank"
                            >
                                Docs
                            </a>
                        </div>
                    </div>
                ))
            }
        </div>
    </LandingPageSection>

    <LandingPageSection
        tag="React Table FAQs"
        heading="Frequently Asked Questions"
        subHeading="Answers to some commonly asked questions when building React Tables with AG Grid"
    >
        <LandingPageFAQ client:load FAQData={faqData} framework={'react'} />
    </LandingPageSection>
</Layout>
